<template>
  <div class="time-weather">
    <div class="weather">
      <div class="left">{{ weatherObj.temperature }}℃</div>
      <div class="icon-view">
        <i class="el-icon-sunny"></i>
      </div>
      <div class="text-view">
        <div>{{ weatherObj.weather }}</div>
        <div>{{ weatherObj.city }}</div>
      </div>
    </div>
    <div class="divider-view">
      <el-divider direction="vertical"></el-divider>
    </div>
    <div class="timer">
      <div>{{ nowTime }}</div>
    </div>
    <div class="date">
      <div>{{ nowWeek }}</div>
      <div>{{ nowDate }}</div>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader"
window._AMapSecurityConfig = {
  securityJsCode: "2c55a5dc8b4d1f10962e9497919074c8" // '「申请的安全密钥」',
}
export default {
  components: {},
  props: {
    totalObject: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      nowTime: "", // 时间
      nowDate: "", // 日期
      nowWeek: "", // 星期
      timer: null,
      weatherObj: {
        weather: "--",
        temperature: 0,
        city: "--"
      }
    }
  },
  mounted() {
    this.getNowTime()
    this.initAMap()
  },
  watch: {},
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    // 获取当前日期时间
    getNowTime() {
      let speed = 1000
      let that = this
      let theNowTime = function () {
        that.timeNumber()
      }
      this.timer = setInterval(theNowTime, speed)
    },
    timeNumber() {
      let today = new Date()
      this.nowDate =
        today.getFullYear() + "-" + this.twoDigits(today.getMonth() + 1) + "-" + this.twoDigits(today.getDate())
      this.nowTime =
        this.twoDigits(today.getHours()) +
        ":" +
        this.twoDigits(today.getMinutes()) +
        ":" +
        this.twoDigits(today.getSeconds())
      let week = new Date().getDay()
      let weeks = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

      this.nowWeek = weeks[week]
    },
    twoDigits(val) {
      if (val < 10) return "0" + val
      return val
    },
    // 获取天气
    initAMap() {
      AMapLoader.load({
        key: "dde5dce82d918a57d572c3c1ad489ff2", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.Scale",
          "AMap.ToolBar",
          "AMap.ControlBar",
          "AMap.Geocoder",
          "AMap.Marker",
          "AMap.CitySearch",
          "AMap.Geolocation",
          "AMap.AutoComplete",
          "AMap.InfoWindow"
        ] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          const that = this
          AMap.plugin("AMap.Weather", function () {
            var weather = new AMap.Weather()
            weather.getLive("重庆市", function (err, data) {
              if (!err) {
                that.weatherObj = { ...data }
              }
            })
          })
        })
        .catch((e) => {
          console.log(e)
        })
    }
  }
}
</script>

<style scoped lang="scss">
.time-weather {
  width: 100%;
  height: 100%;
  color: #050505;
  // background: rgba(3, 10, 14, 0.9);
  display: flex;
  align-items: center;
  position: relative;
  top: 8px;
  z-index: 3;
  .weather {
    width: 33%;
    display: flex;
    align-items: center;
    .left {
      font-size: 28px;
    }
    .icon-view {
      font-size: 26px;
      margin-left: 6px;
    }
    .text-view {
      font-size: 12px;
      margin-left: 6px;
      text-align: left;
      color: #050505;
    }
  }
  .timer {
    width: 33%;
    font-size: 28px;
    display: flex;
    justify-content: center;
  }
  .date {
    font-size: 12px;
    margin-left: 6px;
    color: #050505;
  }
}
.divider-view {
  height: 100%;
  display: flex;
  align-items: center;
  .el-divider {
    background-color: #050505;
    height: calc(100% - 25px);
  }
}
</style>
